// import { useState } from 'react'
// import { useReducer, Reducer } from 'react'
import { useImmerReducer } from "use-immer"
interface StateList {
  id: number
  text: string
}

interface Action  {
  type: string
  id: number
}

const listReducer = (draft:StateList[], action:Action) => {
  const { id } = action;
  switch (action.type) {
    case 'add':
          draft.push({ id: draft.length + 1, text: 'dddd' })
          break
    case 'edit':
            draft[id].text = 'new' + 'ddd'
          break
    case 'remove':
          draft.filter(item => item.id !== id);
          break
  }
};

export default function App() {
    
  const [list, dispatch] = useImmerReducer(listReducer, [
    { id: 1, text: 'aaa' },
    { id: 2, text: 'bbb' },
    { id: 3, text: 'ccc' },
  ]);

  return (
    <>
      <input type="text" />
      <button onClick={() => dispatch({ type: 'add',id:0 })}>add com</button>
      {list.map(item => {
        return (
          <li key={item.id}>
            {item.text}
            <button onClick={() => dispatch({ type: 'edit', id: item.id })}>编辑</button>
            <button onClick={() => dispatch({ type: 'remove', id: item.id })}>删除</button>
          </li>
        );
      })}
    </>
  );
}

// export default function ReduceComponents() {

//     const [list,dispatch] = useReducer(listReducer,[
//         { id: 1, text: 'aaa' },
//         { id: 2, text: 'bbb' },
//         { id: 3, text: 'ccc' },   
//     ])

//     return (
//         <>
//             <input type="text" /><button onClick={() => dispatch({type:'add'})}>add com</button>
//             {list.map(item => {
//                 return (
//                     <li key={item.id}>    
//                         {item.text}
//                         <button onClick={() =>  dispatch({type:'edit', id:item.id})}>编辑</button>
//                         <button onClick={() =>  dispatch({type:'remove', id:item.id})}>删除</button>
//                     </li>
//                 )
//             })}
//         </>
//     )
// }

// export default function ReduceComponents() {
//     const [list, setList] = useState([
//         { id: 1, text: 'aaa' },
//         { id: 2, text: 'bbb' },
//         { id: 3, text: 'ccc' },
        
//     ])
//     const handleAdd = () => {
//         setList([...list,{id:4,text:'ddd'}])
//     }
//     const handleEdit = (id:number) => {
//         setList(list.map(item => {
//             if (item.id === id) {
//                return {...item,text:'new'+item.text}
//             } else {
//                 return item
//            }
//         }))
//     }
//     const handleRemove = (id:number) => {
//         setList(list.filter(item => item.id !== id))
//     }
//     return (
//         <>
//             <input type="text" /><button onClick={() => handleAdd()}>add com</button>
//             {list.map(item => {
//                 return (
//                     <li key={item.id}>    
//                         {item.text}
//                         <button onClick={() => handleEdit(item.id)}>编辑</button>
//                         <button onClick={() => handleRemove(item.id)}>删除</button>
//                     </li>
//                 )
//             })}
//         </>
//     )
// }